<template>
	<div class="invitefriends-wrap">
		<div class="header">
			<div class="title">
				邀请好友得好礼
			</div>
			<div class="reward-box">
				<div class="title"><span class="title-left"></span ><span>邀请越多奖励越多</span><span class="title-right"></span></div>
				<div class="reward-rule-box">
					<div class="reward-rule-left">
						<div class="rule-icon-left">
							30
						</div>
						<p class="rule-desc">
							每位到店好友<br/>
							消费可获得
						</p>
						<div class="rule-price">
							<div class="text">30</div>
							<div class="danwei">元奖励</div>
						</div>
					</div>
					<div class="reward-rule-right">
						<div class="rule-icon-right">
							50
						</div>
						<p class="rule-desc">
							每满5位到店<br/>
							消费额外再送
						</p>
						<div class="rule-price">
							<div class="text">50</div>
							<div class="danwei">元奖励</div>
						</div>
					</div>
				</div>
				<div class="btn-invite" ca="推荐有礼_推荐有礼$领取礼包" @click="invitefriends" v-show="showInviteBtnFlag">
					即刻邀请
				</div>
				<div class="show-rule">好友注册可领取抵价券   <a class="rule-more" href="javascript:void(0);" @click="showRuleBox" ca="推荐有礼_推荐有礼$查看活动规则">查看活动规则</a></div>
			</div>
		</div>
		<div class="body">
			<div class="own-reward-box" v-show="showOwnRewardBoxFlag" ca="推荐有礼_推荐有礼$去兑换" @click="toExchangePage">
				<div class="title"><span class="title-left"></span ><span>我的奖励金</span><span class="title-right"></span></div>
				<div class="content">
					<div class="left">
						<div class="content-left">
							<span class="reward-price"><em class="price-text">{{ rewardObj.rewardValue }}</em><em class="price-danwei">元</em></span>
							<span class="reward-status">待兑换</span>
						</div>
					</div>
					<div class="center">
						<div class="content-center">
							<span class="reward-price"><em class="price-text">{{ rewardObj.rewardUsed }}</em><em class="price-danwei">元</em></span>
							<span class="reward-status">已兑换</span>
						</div>
					</div>
					<div class="right">
						<div class="content-right" >
							去兑换>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="title"><span class="title-left"></span ><span>周达人榜</span><span class="title-right"></span></div>
			<ul class="user-list" >
				<li class="user-item" v-for="(user, index) in userList">
					<div class="left item-icon-1" :class="{'item-icon-1': index ==0, 'item-icon-2': index ==1, 'item-icon-3': index ==2, 'item-icon-4': index >=3}">{{ index >=3 ?  index+1: '' }}</div>
					<div class="center">{{ user.mobile }}</div>
					<div class="right">邀请<em>{{ user.count }}</em>人</div>
				</li>
			</ul>
		</div>
		<div class="rule" v-if="showRuleFlag">
			<div class="close" @click="hideRuleBox">＋</div>
			<div class="title">活动规则说明</div>
			<div class="content">
				<p><em class="em">活动时间：</em>即日起至2017年12月31日；</p>
				<p><em class="em">参与对象：</em>车享家用户均可参与，被邀请人限未在车享家APP注册过的用户；</p>
				<p><em class="em">奖券兑换规则：</em><br/>
				1. 每带来一名新用户到店完成消费后，老用户获得30元奖励券，每满5人，额外奖励50元奖励券；奖励券以车享家服务抵价券形式发放，用户可以将个人奖励金额兑换等值的指定金额的现金抵价券；老用户可兑换抵用券金额分别为30元、100元、300元、500元、700元、900元，兑换后的现金抵用券，不限项目全场通用（30元面额抵用券限门店标准五座普通洗车以外其他项目），有效期自兑换之日起3日内有效；<br/>
				2. 老用户奖励金额可连续累计，对应金额有效期至2018年1月31日，老用户需最迟在2018年1月31日前兑换完所有金额，逾期未兑换视作用户主动放弃兑换权利；<br/>
				3. 新用户奖励为15元洗车抵用券、98元车内空气净化抵用券、64元5座机器打蜡抵用券、100元保养抵用券，四选一；对应券限车享家APP使用。对新用户系统后台会有随机电话回访，针对3次回访均无法接通的情况，视作无效信息，对相应奖励做作废处理；<br/>
				4. 对使用虚假信息获取奖励的行为，车享家有权收回对应奖励，车享家在法律允许的范围内拥有对本次活动的解释权。如有任何疑问，详询车享家客服热线：4008-020-666</p>
			</div>
		</div>
		<div class="mask" v-if="showMask">
		</div>
	</div>
</template>

<script>
	import common from '../../assets/js/common';
	import Vue from 'vue';
	import {Toast, MessageBox} from 'mint-ui';
	//import shareImg from "../../../static/image/shareimg.png";
	export default{
		data (){
			return {
				showRuleFlag: false,
				showMask: false,
				showOwnRewardBoxFlag: false,
				showInviteBtnFlag: false,
				rewardObj:{},
				shareUid:'',
				shareMobile:'',
				userList:[]
			};
		},
		components: {},
		created (){
			var _this = this;
		    /*var backUrl = common.isdev() + "/user/checkLogin.htm";
		    var hrefUrl = window.location.href;
		    if (hrefUrl.indexOf("?userInfo=") > -1) {
		    	backUrl = backUrl + hrefUrl.substring(hrefUrl.indexOf("?userInfo="));
		    }
		    _this.$http.post(backUrl, {}).then(function (res) {
		    	_this.init();
		    }, function (err) {
		    });*/
		    
		    _this.init();
		    
		},
		mounted (){
			var _this = this;
			//打点
    		_this.$nextTick(function () {
    			common.ANA_AnalyticsScan();
    		});
		},
		methods: {
			//页面初始化
			init: function () {
				var _this = this;
				//获取用户id
			    lb.getUserInfo(function (data) {
			    	if (!data.text){
			    		return;	
			    	}
	                var uid = data.text.UID;
	                var mobile = data.text.tel;
	                _this.shareUid = encodeURIComponent(uid);
	                _this.shareMobile = mobile;
	                //console.log("uid:"+ uid);
	                _this.showInviteBtnFlag = true;
	                window.sessionStorage.setItem("shareUid", _this.shareUid);
	                _this.getUserReward(_this.shareUid);
	                //_this.getGuide(uid);
	            });
	           /*var uid = common.getCookie('wemall_cxid_c');
	           if (uid && uid !='""') {
	           		console.log("uid",uid);
	           		_this.shareUid = uid;
	           		
	           }*/
	           //渲染周达人榜
	           _this.getGuide('');
			},
			//显示活动规则
			showRuleBox: function () {
				var _this = this;
				_this.showRuleFlag = true;
				_this.showMask = true;
				document.getElementsByClassName('invitefriends-wrap')[0].style.height= '100vh';
	      		document.getElementsByClassName('invitefriends-wrap')[0].style.overflowY = 'hidden';
			},
			//隐藏活动规则
			hideRuleBox: function () {
				var _this = this;
				_this.showRuleFlag = false;
				_this.showMask = false;
				document.getElementsByClassName('invitefriends-wrap')[0].style.height= 'auto';
	      		document.getElementsByClassName('invitefriends-wrap')[0].style.overflowY = 'auto';
			},
			//邀请好友
			invitefriends: function () {
				var _this = this;
	    		var shareObject = {};
	    		var shareUid = _this.shareUid;
	    		//console.log("invitefriends:uid:"+ shareUid);
		        shareObject.url = "https://" + window.location.host + "/cx/cxj/cxjweb/invitefriends2/share/invitefriends2-share.shtml" + "?shareUid=" + shareUid;
		        shareObject.title = "送你车享家保养美容礼券！";
		        shareObject.content = "我在车享家保养爱车，送你车享家礼券，洗车、美容、保养样样皆有，来体验一下吧！";
		        shareObject.imgUrl =  "https://s1.cximg.com/msweb02/cx/cxj/cxjweb/static/image/share-20170622.png";
		        lb.shareInfo(shareObject, function(data) {
		            if (data.errorCode == 0) {
		                if (data.text == 2) {
		            			//_this.$toast("分享朋友圈成功");
		                } else if (data.text == 1) {
		                	//_this.$toast("分享好友成功");
		                }
		            } else if (data.errorCode == 1) {
		            		//_this.$toast("分享已取消");
		            } else {
		            		//_this.$toast("分享失败");
		            }
		        });
			},
			//跳转到去兑换页面
			toExchangePage: function () {
				var _this = this;
				window.location.href =(common.isHtml() == "shtml" ? "/cx/cxj/cxjweb": "") + "/invitefriends2/exchange/invitefriends2-exchange."+common.isHtml();
			},
			
			//获取用户奖励金
			getUserReward: function (userId) {
				var userId = userId || '';
				var _this = this;
				var paramObj = {
					"userId": userId
				};
				_this.$http.get(common.isdev() + '/guide/getUserRewardInfo/0.htm?userId='+userId ).then(function (res) {
					//console.log(res);
			        if(res.data.result == 1) {
			          	_this.rewardObj =  res.data.obj;
			          	_this.showOwnRewardBoxFlag = true;
			        } else {
			        	Toast("获取奖励金失败！");
			        }
			    }, function (res) {
			    	//console.log(res);
			    	Toast("获取奖励金失败！");
			    });
			},
			//获取邀请用户列表
			getGuide: function (uid) {
				var _this = this;
                //var _uid = uid;
                var paramObj = {};
                this.$http.get(common.isdev() + '/guide/getInvitationList/0.htm', paramObj).then(function (res) {
                	//console.log(res);
			        if(res.data.result == 1) {
			          	_this.userList =  res.data.obj;
			        } else {
			        	Toast("获取周达人榜失败！");
			        }
			    }, function (res) {
			    	//console.log(res);
			    	Toast("获取周达人榜失败！");
			    });
            },
		}
	}
</script>

<style lang="scss">
	@import "../../assets/css/reset.scss";
	@import "../../assets/css/common.scss";
	html, body {
	height: 100%;
	}
	.invitefriends-wrap {
		height: 100%;
		position: relative;
		background: #f2f9f3 url("../../assets/image/invitefriends2/invitefriends-bg.jpg") center top no-repeat;
		background-size: 100% auto;
		.header {
			.title {
				padding-top: 4rem;
				text-align: center;
				font-size:3.4rem;
				color:#cc9100;
			}
			.reward-box {
				margin-top: 1.5rem;
				.title {
					margin: 0 auto;
					padding: 0;
					width: 28.7rem;
					height: 2.5rem;
					line-height: 2.5rem;
					font-size:1.8rem;
					color:#243742;
					span {
						display: inline-block;
						vertical-align: middle;
					}
					.title-left {
						width: 7.1rem;
						height: 1px;
						background: #cdcdcd;
					}
					.title-right {
						width: 7.1rem;
						height: 1px;
						background: #cdcdcd;
					}
				}
				.reward-rule-box {
					margin: 0 auto;
					margin-top: 5rem;
					width: 30.7rem;
					.reward-rule-left {
						position: relative;
						float: left;
						width: 14.6rem;
						height: 14.8rem;
						border:1px solid #fd2828;
						border-radius: 1rem;
						overflow: visible;
						.rule-icon-left {
							position: absolute;
							top: 0;
							left: 50%;
							width: 3.8rem;
							height: 3.8rem;
							border: 1px solid #ff6600;
							transform: translate(-50%, -50%);
							-webkit-transform: translate(-50%, -50%);
							border-radius: 999px;
							background: #fdf1df url("../../assets/image/invitefriends2/reward-rule-icon-bg.png") center bottom no-repeat;
							background-size: 2.6rem 3.1rem;
							padding-top: 1.75rem;
							text-align: center;
							font-size: 1.2rem;
							color: #fff316;
						}
						.rule-desc {
								margin-top: 3rem;
								text-align: center;
								font-size: 1.5rem;
								color:#000000;
						}
						.rule-price {
							text-align: center;
							color:#fd2828;
							.text {
								height: 5rem;
								font-size:4.4rem;
								font-weight: 800;
							}
							.danwei {
								font-size:1.3rem;
							}
						}
					}
					.reward-rule-right {
						position: relative;
						float: right;
						width: 14.6rem;
						height: 14.8rem;
						border:1px solid #fd2828;
						border-radius: 1rem;
						overflow: visible;
						.rule-icon-right {
							position: absolute;
							top: 0;
							left: 50%;
							width: 3.8rem;
							height: 3.8rem;
							border: 1px solid #ff6600;
							transform: translate(-50%, -50%);
							-webkit-transform: translate(-50%, -50%);
							border-radius: 999px;
							background: #fdf1df url("../../assets/image/invitefriends2/reward-rule-icon-bg.png") center bottom no-repeat;
							background-size: 2.6rem 3.1rem;
							padding-top: 1.75rem;
							text-align: center;
							font-size: 1.2rem;
							color: #fff316;
						}
						.rule-desc {
								margin-top: 3rem;
								text-align: center;
								font-size: 1.5rem;
								color:#000000;
						}
						.rule-price {
							text-align: center;
							color:#fd2828;
							.text {
								height: 5rem;
								font-size:4.4rem;
								font-weight: 800;
							}
							.danwei {
								font-size:1.3rem;
							}
						}
					}
					&:after {
						clear: both;
						display: block;
						content: '';
						height: 0;
						overflow: hidden;
					}
				}
				.btn-invite {
					margin: 0 auto;
					margin-top: 2rem;
					width: 25rem;
					height: 4.6rem;
					line-height: 4.6rem;
					border-radius: 0.4rem;
					background: #cc9100;
					text-align: center;
					font-size: 1.7rem;
					color: #ffffff;
				}
				.show-rule {
					margin: 0 auto;
					margin-top: 1.1rem;
					height: 1.8rem;
					line-height: 1.8rem;
					text-align: center;
					font-size:1.3rem;
					color:#223037;
					.rule-more {
						margin-left: 1.8rem;
						color: #cc9100;
					}
				}
			}
		}
		.body {
			margin-top: 4.7rem;
			.own-reward-box {
				.title {
					margin: 0 auto;
					padding: 0;
					height: 2.1rem;
					line-height: 2.1rem;
					font-size:1.5rem;
					color:#808c83;
					text-align: center;
					span {
						display: inline-block;
						vertical-align: middle;
					}
					.title-left {
						width: 7.9rem;
						height: 1px;
						background: #cdcdcd;
					}
					.title-right {
						width: 7.9rem;
						height: 1px;
						background: #cdcdcd;
					}
				}
				.content {
					height: 9rem;
					.left {
						position: relative;
						float: left;
						width: 33.33%;
						height: 9.2rem;
						.content-left {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							-webkit-transform: translate(-50%, -50%);
							text-align: center;
							.reward-price {
								display: block;
								height: 3rem;
								line-height: 3rem;
								color: #cc9100;
								
								.price-text {
									font-size: 2.8rem;
								}
								.price-danwei {
									font-size: 1.3rem;
								}
							}
							.reward-status {
								display: block;
								line-height: 1.3rem;
								font-size: 1.3rem;
								color: #808c83;
							}
						}
					}
					.center {
						position: relative;
						float: left;
						width: 33.33%;
						height: 9.2rem;
						
						.content-center {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							-webkit-transform: translate(-50%, -50%);
							text-align: center;
							.reward-price {
								display: block;
								height: 3rem;
								line-height: 3rem;
								color: #cc9100;
								
								.price-text {
									font-size: 2.8rem;
								}
								.price-danwei {
									font-size: 1.3rem;
								}
							}
							.reward-status {
								display: block;
								line-height: 1.3rem;
								font-size: 1.3rem;
								color: #808c83;
							}
						}
					}
					.right {
						position: relative;
						float: left;
						width: 33.33%;
						height: 9.2rem;
						.content-right {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							-webkit-transform: translate(-50%, -50%);
							text-align: center;
							font-size:1.5rem;
							color:#95a199;
						}
					}
					&:after {
						clear: both;
						display: block;
						content: '';
						height: 0;
						overflow: hidden;
					}
				}
			}
		}
		.footer {
			padding-top: 2rem;
			background: #ffffff;
			.title {
				margin: 0 auto;
				padding: 0;
				height: 2.1rem;
				line-height: 2.1rem;
				font-size:1.5rem;
				color:#000000;
				text-align: center;
				span {
					display: inline-block;
					vertical-align: middle;
				}
				.title-left {
					width: 7.9rem;
					height: 1px;
					background: #cdcdcd;
				}
				.title-right {
					width: 7.9rem;
					height: 1px;
					background: #cdcdcd;
				}
			}
			.user-list {
				padding: 3rem 2rem 5rem;
				.user-item {
					margin-top:3.2rem;
					&:nth-of-type(1) {
						margin-top: 0;
					}
					.item-icon-1 {
						background: #fdf1df url(../../assets/image/invitefriends2/icon-user-list-01.png) center bottom no-repeat;
						background-size: 2.6rem 2.6rem;
					}
					.item-icon-2 {
						background: #fdf1df url(../../assets/image/invitefriends2/icon-user-list-02.png) center bottom no-repeat;
						background-size: 2.6rem 2.6rem;
					}
					.item-icon-3 {
						background: #fdf1df url(../../assets/image/invitefriends2/icon-user-list-03.png) center bottom no-repeat;
						background-size: 2.6rem 2.6rem;
					}
					.item-icon-4 {
						background: #fdf1df url(../../assets/image/invitefriends2/icon-user-list-04.png) center bottom no-repeat;
						background-size: 2.6rem 2.6rem;
					}
					.left {
						float: left;
						width: 2.6rem;
						height: 2.6rem;
						line-height: 2.6rem;
						border-radius:100%;
						text-align: center;
						font-size:1.5rem;
						color:#ffffff;
					}
					.center {
						float: left;
						height: 2.6rem;
						line-height: 2.6rem;
						padding-left: 1.5rem;
						font-size: 1.4rem;
						color: #000000;
					}
					.right {
						float: right;
						height: 2.6rem;
						line-height: 2.6rem;
						font-size: 1.4rem;
						color: #000000;
					}
					&:after {
						clear: both;
						display: block;
						content: '';
						height: 0;
						overflow: hidden;
					}
				}
				
			}
			
		}
		.rule {
			position: fixed;
			top: 50%;
			left: 50%;
			z-index: 1000;
			transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			width: 33.5rem;
			border-radius: 0.8rem;
			background: #ffffff;
			overflow-x: hidden;
			padding-bottom: 1.7rem;
			.close {
				position: absolute;
				top: 0.2rem;
				right: 0.5rem;
				transform:rotate(-45deg);
				-webkit-transform:rotate(-45deg);
				text-align: center;
				font-size: 2.6rem;
				color: #b0b6b9;
			}
			.title {
				padding: 1.1rem 0 1.6rem;
				text-align: center;
				font-size:1.7rem;
				color:#707a81;
				font-weight: 800;
			}
			.content {
				overflow-scrolling: touch;
				-webkit-overflow-scrolling: touch;
				overflow-y: scroll;
				overflow-x: hidden;
				height: 40.7rem;
				line-height:2.2rem;
				padding: 0  2rem 0 2rem;
				font-size:1.5rem;
				color:#707a81;
				p {
					margin-top: 3rem;
					&:nth-of-type(1) {
						margin-top: 0;
					}
				}
				.em {
					font-weight: 800;
				}
			};
		}
		.mask {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.7);
		}
	}
</style>
